<template>
  <div>
    <el-col :span="9" class="propertyborder-title">
      <a-tooltip>
        <template slot="title">{{ content }}</template>
        {{ title }}
      </a-tooltip>
    </el-col>
    <el-col :span="15" class="propertyborder-content">
      <el-dropdown @command="addColumn">
        <span class="el-dropdown-link">
          添加字段<i class="el-icon-arrow-down el-icon--right"></i>
        </span>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item :command="{ ctrl: 'label', index: 0 }"
            >文本label</el-dropdown-item
          >
          <div v-for="ctrl in basicComponents" :key="ctrl.type">
            <el-dropdown-item
              v-if="ctrl.dragType === 'control'"
              :command="{ ctrl, index: 0 }"
              >{{ ctrl.name }}</el-dropdown-item
            >
          </div>
          <div v-for="ctrl in platformComponents" :key="ctrl.type">
            <el-dropdown-item
              v-if="ctrl.dragType === 'control'"
              :command="{ ctrl, index: 0 }"
              >{{ ctrl.name }}</el-dropdown-item
            >
          </div>
        </el-dropdown-menu>
      </el-dropdown>
      <span
        class="el-dropdown-link"
        @click="loadfiled"
        style="padding-top:5px;padding-bottom:5px;cursor:pointer;"
        v-if="fromInfo.designType !== '/buildquestionnaire.html'"
      >
        <i class="fa fa-plus"></i>&nbsp;加载字段
      </span>
    </el-col>
    <el-col :span="24" class="widget-config-container">
      <template>
        <ul>
          <li style="background: lightgray;padding: 2px;margin-bottom:2px;">
            <div style="display:inline-block;width:60%;padding-left:10px;">
              <label style="width:65px;float:left">表头</label>
              <label style="width:65px;float:left;margin-left: 5px;"
                >绑定字段</label
              >
            </div>
            <label>操作</label>
          </li>
        </ul>
        <draggable
          tag="ul"
          :list="datalist"
          v-bind="{
            group: { name: 'options1' },
            ghostClass: 'ghost',
            handle: '.drag-item'
          }"
          handle=".drag-item"
        >
          <li
            v-for="(item, index) in datalist"
            :key="index"
            style="background: lightgray;padding: 2px;margin-bottom:2px;"
          >
            <!-- <el-input placeholder="栅格值" size="mini" style="width: 100px;" type="number" v-model.number="item.span"></el-input> -->
            <div style="display:inline-block;width:60%;padding-left:10px;">
              <input v-model="item.title" style="width:65px;float:left" />
              <input
                v-model="item.dataIndex"
                style="width:65px;float:left;margin-left: 5px;"
              />
            </div>
            <el-button
              @click="layerPlaneshowDialog(index)"
              circle
              plain
              type="danger"
              size="mini"
              icon="el-icon-edit"
              style="padding: 4px;margin-left: 5px;"
            ></el-button>
            <el-dropdown @command="addDetailColumn">
              <el-button
                circle
                plain
                type="danger"
                size="mini"
                icon="fa fa-bolt"
                :key="index"
                style="padding: 4px;margin-left: 5px;width:22px;"
              ></el-button>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item :command="{ ctrl: 'label', index: index }"
                  >文本label</el-dropdown-item
                >
                <div v-for="ctrl in basicComponents" :key="ctrl.type">
                  <el-dropdown-item
                    v-if="ctrl.dragType === 'control'"
                    :command="{ ctrl, index: index }"
                    >{{ ctrl.name }}</el-dropdown-item
                  >
                </div>
                <div v-for="ctrl in platformComponents" :key="ctrl.type">
                  <el-dropdown-item
                    v-if="ctrl.dragType === 'control'"
                    :command="{ ctrl, index: index }"
                    >{{ ctrl.name }}</el-dropdown-item
                  >
                </div>
              </el-dropdown-menu>
            </el-dropdown>

            <el-button
              @click="handleButtonRemove(index)"
              circle
              plain
              type="danger"
              size="mini"
              icon="el-icon-minus"
              style="padding: 4px;margin-left: 5px;"
            ></el-button>
            <i
              class="drag-item fa fa-bars"
              style="font-size: 16px;margin: 0 5px;cursor: move;"
            ></i>
          </li>
        </draggable>
      </template>
    </el-col>
  </div>
</template>
<script>
import draggable from 'vuedraggable'
import { getListHeadCell } from '@/api/index'
import {
  basicComponents,
  platformComponents
} from '@/components/formdesign/controlconfig.js'
export default {
  props: ['title', 'content', 'datalist', 'widgetdata'],
  data() {
    return {
      basicComponents,
      platformComponents,
      selectwidgetdata: this.widgetdata,
      sourceApiId: this.widgetdata.options.sourceApiId,
      fromInfo: this.changeFromInfo()
    }
  },
  components: { draggable },
  methods: {
    addColumn(ctrl) {
      const index = this.datalist.length + 1
      let cloneData = {
        title: '字段' + index,
        dataIndex: 'filed' + index,
        width: '120',
        isScopedSlots: false,
        type: 'lable',
        options: {}
      }
      if (ctrl.ctrl !== 'label') {
        const contrloptions = JSON.parse(JSON.stringify(ctrl.ctrl.options))
        const newctrl = {
          options: {
            ...Object.assign({}, contrloptions)
          },
          type: ctrl.ctrl.type
        }
        cloneData = Object.assign(cloneData, newctrl)
        cloneData.isScopedSlots = true
        const ctrlId =
          String(Date.parse(new Date()) / 1000) +
          Math.ceil(Math.random() * 99999)
        // console.log(labelId + '_' + ctrlId)
        if (typeof cloneData.options.controlId !== 'undefined') {
          cloneData.options.controlId = ctrlId
        }

        if (
          newctrl.type === 'radio' ||
          newctrl.type === 'checkbox' ||
          newctrl.type === 'select'
        ) {
          cloneData = {
            ...cloneData,
            options: {
              ...cloneData.options,
              options: cloneData.options.options.map(item => ({ ...item }))
            }
          }
        }
        if (newctrl.type === 'inputnumber') {
          cloneData.width = '180'
        }
        cloneData.options.filed = 'filed' + ctrlId
      }

      this.datalist.splice(index, 0, cloneData)
    },
    loadfiled() {
      const actionfun = this.widgetdata.options.source
      if (actionfun === undefined || actionfun === null) {
        this.$message.error('请选择数据源API')
        return
      }
      if (actionfun.type === 'swagger') {
        //  this.datalist.length = 0
        const resultinfo = actionfun.result.properties
        for (const key in resultinfo) {
          const datafilter = this.datalist.filter(item => {
            return item.dataIndex.indexOf(key.trim()) >= 0
          })
          if (datafilter.length === 0) {
            this.datalist.push({
              title: resultinfo[key].description,
              dataIndex: key,
              width: 120,
              isScopedSlots: false,
              options: {}
            })
          }
        }
      } else {
        // this.datalist.length = 0
        getListHeadCell(actionfun.sourceApi).then(res => {
          if (res.code === 0 && res.success) {
            for (let i = 0; i < res.data.length; i++) {
              const datafilter = this.datalist.filter(item => {
                return item.dataIndex.indexOf(res.data[i].bindname.trim()) >= 0
              })
              if (datafilter.length === 0) {
                this.datalist.push({
                  title: res.data[i].headname,
                  dataIndex: res.data[i].bindname,
                  width: 120,
                  isScopedSlots: false,
                  type: 'lable',
                  options: {}
                })
              }
            }
          }
        })
        const datafilter = this.datalist.filter(item => {
          return item.dataIndex.indexOf('operation') >= 0
        })
        if (datafilter.length === 0) {
          this.datalist.push({
            title: '操作',
            dataIndex: 'operation',
            width: 120,
            isScopedSlots: false,
            type: 'lable',
            options: {}
          })
        }
      }
    },
    handleButtonRemove(index) {
      this.datalist.splice(index, 1)
    },
    addDetailColumn(ctrl) {
      const index = ctrl.index
      const celitem = this.datalist[index]
      let cloneData = null
      const contrloptions = JSON.parse(JSON.stringify(ctrl.ctrl.options))
      const newctrl = {
        options: {
          ...Object.assign({}, contrloptions)
        },
        type: ctrl.ctrl.type
      }
      if (ctrl.ctrl === 'label') {
        cloneData = Object.assign(celitem, {
          title: celitem.title,
          dataIndex: celitem.dataIndex,
          width: celitem.width,
          isScopedSlots: false,
          type: 'lable',
          options: {}
        })
        return
      }
      cloneData = Object.assign(celitem, newctrl)
      cloneData.isScopedSlots = true
      const labelId =
        String(Date.parse(new Date()) / 1000) + Math.ceil(Math.random() * 99999)
      const ctrlId =
        String(Date.parse(new Date()) / 1000) + Math.ceil(Math.random() * 99999)
      // console.log(labelId + '_' + ctrlId)
      if (typeof cloneData.options.labelId !== 'undefined') {
        cloneData.options.labelId = labelId
      }

      if (typeof cloneData.options.controlId !== 'undefined') {
        cloneData.options.controlId = ctrlId
      }
      if (typeof cloneData.options.filed !== 'undefined') {
        cloneData.options.filed = 'filed' + ctrlId
      }
      if (
        newctrl.type === 'radio' ||
        newctrl.type === 'checkbox' ||
        newctrl.type === 'select'
      ) {
        cloneData = {
          ...cloneData,
          options: {
            ...cloneData.options,
            options: cloneData.options.options.map(item => ({ ...item }))
          }
        }
      }
    },
    layerPlaneshowDialog(index) {
      this.setSelectWidget(this.datalist[index])
    }
  },
  computed: {
    SetChangeFromInfo() {
      return this.changeFromInfo()
    }
  },
  watch: {
    SetChangeFromInfo(val) {
      this.fromInfo = val
    }
  },
  inject: ['changeFromInfo', 'setSelectWidget']
}
</script>
<style scoped lang="less">
.propertyborder-title {
  height: 42px;
  line-height: 42px;
  padding-left: 3px;
  border: 1px solid #ccc;
  border-top: none;
  border-right: none;
}

.propertyborder-content {
  border: 1px solid #ccc;
  border-top: none;
  border-right: none;
  padding-right: 3px;
  padding-left: 3px;
  padding-top: 4px;
  padding-bottom: 4px;
  height: 42px;
}
.widget-config-container {
  position: relative;

  .el-header {
    border-bottom: solid 2px #e4e7ed;
    padding: 0px;
  }

  .column-setting .el-form-item__label {
    float: none;
    display: inline-block;
    text-align: left;
    padding: 0 0 2px;
  }

  .config-content {
    border-left: solid 1px #e6e6e6;

    .el-form-item__label {
      padding: 0;
      font-weight: 500;
      float: none;
    }

    .el-form-item {
      /*border-bottom: solid 1px #e1e1e1;
            margin-bottom: 0px;*/
      margin: 5px;
    }
  }

  .ghost {
    background: #fff;
    border: 1px dashed #409eff;

    &::after {
      background: #fff;
      display: block;
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
    }
  }

  ul {
    margin: 0;
    padding: 0;
  }

  li.ghost {
    list-style: none;
    font-size: 0;
    display: block;
    position: relative;
  }
}
</style>
